<div class="row text-center main-container">
    <div class="panel panel-default panel-home col-md-12 col-sm-12 fill">
        <div class="col-md-3 col-sm-3 col-xs-12 panel panel-home" ng-init="init.Initial()" style="height: 646px;">
            
            <div class="row panel-heading">
                <ul id="snav col-md-3 col-sm-3 col-xs-12" class="nav nav-tabs nav-justified">
                    <li class="active nav-item" data-page="friends" ng-click="init.Toggle($event)" >
                        <a href="#/home">
                            <span class="glyphicon glyphicons-user" data-toggle="tooltip" tooltip-placement="bottom" tooltip="好友" ></span>
                        </a>
                    </li>
                    <li class="nav-item" data-page="groups" ng-click="init.Toggle($event)">
                        <a href="#/home">
                            <span class="glyphicon glyphicons-group" data-toggle="tooltip" tooltip-placement="bottom" tooltip="群组" ></span>
                        </a>
                    </li>
                    <li class="nav-item" data-page="rooms" ng-click="init.Toggle($event)" >
                        <a href="#/home">
                            <span class="glyphicon glyphicons-chat" data-toggle="tooltip" tooltip-placement="bottom" tooltip="聊天室" ></span>
                        </a>
                    </li>
                </ul>
            </div>

            <div class="row" id="spage">
                <div id="friends" style="display: block;">
                    <ul class="list-group text-center all-item-group">
                        <li class="list-group-item text-center">
                            <input type="text" ng-model="friend.find" placeholder="查找好友" class="form-control" ng-change="friend.Search()">
                        </li>
                        <li class="list-group-item select context-me" data-toggle="context" data-target="#context-me-menu" data-id="{{ userid }}" data-kind="me" data-name="{{ nickname }}" ng-click="profile.InfoWindow()">
                            <strong data-toggle="tooltip" tooltip-placement="left" tooltip="ID: {{ userid }}">我</strong>
                        </li>
                        <li class="list-group-item search-result" ng-repeat="x in friend.search" data-id="{{ x.userid }}" ng-click="friend.SearchClick($event)">
                            <strong data-toggle="tooltip" tooltip-placement="left" tooltip="ID: {{ x.userid }}" >{{ x.nickname }}</strong>
                        </li>
                        <li class="list-group-item search-result" data-toggle="modal" ng-click="friend.Find($event)" ng-if="friend.find"> <!-- data-target="#make_friends_modal" -->
                            <span class="glyphicon glyphicons-user_add">&nbsp;&nbsp;查找更多</span>
                        </li>
                        <li class="list-group-item select context-friend" data-toggle="context" data-target="#context-friend-menu" ng-repeat="x in friend.all" data-id="{{ x.userid }}" data-kind="friend" data-name="{{ x.nickname }}" ng-click="chat.SetContext($event)">
                            <strong data-toggle="tooltip" tooltip-placement="left" tooltip="ID: {{ x.userid }}">{{ x.nickname }}</strong>
                            <span class="badge" id="badge-friend-{{ x.userid }}"></span>
                        </li>
                    </ul>
                    
                    <div id="context-friend-menu" style="position: absolute; z-index: 9999; top: 389px; left: 558px;" class="">
                        <ul class="dropdown-menu" role="menu">
                            <li data-action="chat"><a tabindex="-1">发起聊天</a></li>
                            <li data-action="view_info"><a tabindex="-1">用户信息</a></li>
                            <li data-action="view_record"><a tabindex="-1">聊天记录</a></li>
                            <li class="divider"></li>
                            <li data-action="delete"><a tabindex="-1">删除好友</a></li>
                        </ul>
                    </div>

                    <div id="context-me-menu" style="position: absolute; z-index: 9999; top: 389px; left: 558px;" class="">
                        <ul class="dropdown-menu" role="menu">
                            <li data-action="update_profile"><a tabindex="-1">个人资料</a></li>
                            <li class="divider"></li>
                            <li data-action="update_pass"><a tabindex="-1">修改密码</a></li>
                            <li class="divider"></li>
                            <li data-action="logout"><a tabindex="-1">登出</a></li>
                        </ul>
                    </div>

                    <div class="modal fade" id="update_profile_modal" tabindex"-1" role="dialog" aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times</button>
                                    <h4 class="modal-title">完善个人资料</h4>
                                </div>
                                <div class="modal-body">
                                    <form class="form text-left" role="form" action="#" method="post" accept-charset="utf-8" onsubmit="return false;" ng-submit="profile.UpdateProfile()">
                                        <div class="form-group">
                                            <label for="n_userid" class="control-label">用户 ID</label>
                                            <input class="form-control" ng-disabled="true" type="text" id="n_userid" value="{{ userid }}" placeholder="ID">
                                        </div>
                                        <div class="form-group">
                                            <label for="n_nickname" class="control-label">用户昵称</label>
                                            <input class="form-control" type="text" ng-model="profile.n_nickname" placeholder="昵称" required>
                                        </div>
                                        <div class="form-group">
                                            <label for="n_email" class="control-label">用户邮箱</label>
                                            <input class="form-control" type="email" ng-model="profile.n_email" placeholder="邮箱" required>
                                        </div>
                                        <div ng-if="profile.updatemessage">
                                            <span ng-bind="profile.updatemessage" class="form-control alert alert-info text-center"></span>
                                        </div>
                                        <div ng-if="profile.updateerror">
                                            <span ng-bind="profile.updateerror" class="form-control alert alert-danger text-center"></span>
                                        </div>
                                        <div class="form-group btn-group btn-group-justified" role="group">
                                            <div class="btn-group" role="group">
                                                <button type="button" class="from-control btn btn-default" data-dismiss="modal">取消</button>
                                            </div>
                                            <div class="btn-group" role="group">
                                                <button type="submit" class="from-control btn btn-primary">提交修改</button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                                <div class="modal-footer">
                                    <!-- space -->
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="modal fade" id="update_pass_modal" tabindex"-1" role="dialog" aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times</button>
                                    <h4 class="modal-title">修改密码</h4>
                                </div>
                                <div class="modal-body">
                                    <form class="form" role="form" action="#" method="post" accept-charset="utf-8" onsubmit="return false;" ng-submit="profile.UpdatePass()">
                                        <div class="form-group">
                                            <input class="form-control" type="password" ng-model="profile.n_pass_old" placeholder="旧密码" required>
                                        </div>
                                        <div class="form-group">
                                            <input class="form-control" type="password" ng-model="profile.n_pass" placeholder="新密码" required>
                                        </div>
                                        <div class="form-group">
                                            <input class="form-control" type="password" ng-model="profile.n_pass_again" placeholder="重复新密码" required>
                                        </div>
                                         <div ng-if="profile.updatepassmessage">
                                            <span ng-bind="profile.updatepassmessage" class="form-control alert alert-info text-center"></span>
                                        </div>
                                        <div ng-if="profile.updatepasserror">
                                            <span ng-bind="profile.updatepasserror" class="form-control alert alert-danger text-center"></span>
                                        </div>
                                        <div class="form-group btn-group btn-group-justified" role="group">
                                            <div class="btn-group" role="group">
                                                <button type="button" class="from-control btn btn-default" data-dismiss="modal">取消</button>
                                            </div>
                                            <div class="btn-group" role="group">
                                                <button type="submit" class="from-control btn btn-primary">提交修改</button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                                <div class="modal-footer">
                                    <!-- space -->
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="modal fade" id="make_friends_modal" tabindex"-1" role="dialog" aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times</button>
                                    <h4 class="modal-title">查找好友结果</h4>
                                </div>
                                <div class="modal-body">
                                    <div class="row">
                                        <div class="col-sm-2 col-md-2 col-xs-4 col-lg-2 text-center" ng-repeat="x in friend.found" data-toggle="tooltip" tooltip-placement="bottom" tooltip="ID: {{ x.userid }}" data-id="{{ x.userid }}" ng-click="friend.SetTarget($event)">
                                            <span><span class="glyphicon glyphicon-user"></span><br /> {{ x.nickname }}</span>
                                            <br />
                                        </div>
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <!-- space -->
                                </div>
                                <div class="modal-header">
                                    <h4 class="modal-title">添加好友</h4>
                                </div>
                                <div class="modal-body">
                                    <form class="form" role="form" action="#" method="post" accept-charset="utf-8" onsubmit="return false;" ng-submit="friend.MakeF()">
                                        <div class="form-group">
                                            <input class="form-control" type="text" value="" placeholder="好友ID" ng-model="friend.targetid">
                                        </div>
                                        <div ng-if="friend.addmessage">
                                            <span ng-bind="friend.addmessage" class="form-control alert alert-info text-center"></span>
                                        </div>
                                        <div ng-if="friend.adderror">
                                            <span ng-bind="friend.addresult" class="form-control alert alert-danger text-center"></span>
                                        </div>
                                        <div class="form-group btn-group btn-group-justified" role="group">
                                            <div class="btn-group" role="group">
                                                <button type="button" class="from-control btn btn-default" data-dismiss="modal">取消</button>
                                            </div>
                                            <div class="btn-group" role="group">
                                                <button type="submit" class="from-control btn btn-primary">发送请求</button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="modal fade" id="view_friend_record" tabindex="-1", role="dialog" aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times</button>
                                    <h4 class="modal-title">好友聊天记录</b></h4>
                                </div>
                                <div class="modal-body">
                                    <form role="form">
                                        <div ng-repeat="x in friend.record">
                                            <div class="row input-group text-left" ng-if="x.userid != userid">
                                                <span class="input-group-addon" data-toggle="tooltip" tooltip-placement="bottom" tooltip="{{ x.ctime }}">
                                                    <button class="form-control btn btn-default btn-sm"><span class="glyphicon glyphicon-user"></span>&nbsp;&nbsp;{{ x.nickname }}</button>
                                                </span>
                                                <div class="messagebox message-left pull-left">
                                                    <div class="arrow">
                                                        <div class="outer"></div>
                                                        <div class="inner"></div>
                                                    </div>
                                                    <div class="message-body">
                                                        <p>{{ x.content }}</p>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row input-group text-right" ng-if="x.userid == userid">
                                                <div class="messagebox message-right pull-right">
                                                    <div class="message-body">
                                                        <p>{{ x.content }}</p>
                                                    </div>
                                                    <div class="arrow">
                                                        <div class="outer"></div>
                                                        <div class="inner"></div>
                                                    </div>
                                                </div>
                                                <span class="input-group-addon" data-toggle="tooltip" tooltip-placement="bottom" tooltip="{{ x.ctime }}">
                                                    <button class="form-control btn btn-default btn-sm">{{ x.nickname }}&nbsp;&nbsp;<span class="glyphicon glyphicon-user"></span></button>
                                                </span>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="modal fade" id="view_friend_info_modal" tabindex"-1" role="dialog" aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times</button>
                                    <h4 class="modal-title">用户信息</h4>
                                </div>
                                <div class="modal-body">
                                    <form class="form text-left" role="form" action="#" method="post" accept-charset="utf-8" onsubmit="return false;">
                                        <div class="form-group">
                                            <label for="n_userid" class="control-label">用户 ID</label>
                                            <input class="form-control" ng-disabled="true" type="text" ng-model="friend.info.userid" placeholder="ID" required>
                                        </div>
                                        <div class="form-group">
                                            <label for="n_nickname" class="control-label">用户昵称</label>
                                            <input class="form-control" ng-disabled="true" type="text" ng-model="friend.info.nickname" placeholder="昵称" required>
                                        </div>
                                        <div class="form-group">
                                            <label for="n_email" class="control-label">用户邮箱</label>
                                            <input class="form-control" ng-disabled="true" type="email" ng-model="friend.info.email" placeholder="邮箱" required>
                                        </div>
                                        <div class="form-group btn-group btn-group-justified" role="group">
                                            <div class="btn-group" role="group">
                                                <button type="button" class="from-control btn btn-default" data-dismiss="modal">关闭窗口</button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                                <div class="modal-footer">
                                    <!-- space -->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div id="groups" style="display: none;">
                    <ul class="list-group text-center all-item-group">
                        <li class="list-group-item text-center">
                            <input type="text" ng-model="group.find" placeholder="查找群组" class="form-control" ng-change="group.Search()">
                        </li>
                        <li class="list-group-item search-result" ng-repeat="x in group.search" data-toggle="tooltip" tooltip-placement="bottom" tooltip="ID: {{ x.groupid }}" data-id="{{ x.groupid }}" ng-click="group.SearchClick($event)">
                            <span>{{ x.groupname }}</span>
                        </li>
                        <li class="list-group-item search-result" data-toggle="modal" ng-click="group.Find($event)" ng-if="group.find"> <!-- data-target="#join_group_modal" -->
                            <span class="glyphicon glyphicons-user_add">&nbsp;&nbsp;查找更多</span>
                        </li>

                        <div class="panel-group" id="accordion">
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <a data-toggle="collapse" data-parent="#accordion" href="#admined-groups" target="_self">我的群组</a>
                                </div>
                                <div id="admined-groups" class="panel-collapse collapse in">
                                    <div class="panel-body">
                                        <li class="list-group-item" data-toggle="modal" data-target="#create_group_modal">
                                            <span class="glyphicon glyphicon-plus">&nbsp;&nbsp;创建群组</span>
                                        </li>
                                        <li class="list-group-item select context-group" data-toggle="context" data-target="#context-group-menu" ng-repeat="x in group.admined" data-toggle="tooltip" tooltip-placement="bottom" tooltip="ID: {{ x.groupid }}" data-id="{{ x.groupid }}" data-kind="group" data-name="{{ x.groupname }}" ng-click="chat.SetContext($event)">
                                            <strong class="text-center">{{ x.groupname }}</strong>
                                            <span class="badge" id="badge-group-{{ x.groupid }}"></span>
                                        </li>
                                    </div>
                                </div>
                            </div>
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <a data-toggle="collapse" data-parent="#accordion" href="#joined-groups" target="_self">普通群组</a>
                                </div>
                                <div id="joined-groups" class="panel-collapse collapse">
                                    <div class="panel-body">
                                        <li class="list-group-item select context-group" data-toggle="context" data-target="#context-group-menu" ng-repeat="x in group.joined" data-toggle="tooltip" tooltip-placement="bottom" tooltip="ID: {{ x.groupid }}" data-id="{{ x.groupid }}" data-kind="group" data-name="{{ x.groupname }}" ng-click="chat.SetContext($event)">
                                            <strong class="text-center">{{ x.groupname }}</strong>
                                            <span class="badge" id="badge-group-{{ x.groupid }}"></span>
                                        </li>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </ul>
                    
                    <div id="context-group-menu" style="position: absolute; z-index: 9999; top: 389px; left: 558px;" class="">
                        <ul class="dropdown-menu" role="menu">
                            <li data-action="chat"><a tabindex="-1">发起聊天</a></li>
                            <li data-action="view_info"><a tabindex="-1">群组信息</a></li>
                            <li data-action="view_record"><a tabindex="-1">聊天记录</a></li>
                            <li class="divider"></li>
                            <li data-action="delete"><a tabindex="-1">删除群组</a></li>
                        </ul>
                    </div>
                    
                    <div class="modal fade" id="create_group_modal" tabindex="-1" role="dialog" aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times</button>
                                    <h4 class="modal-title">创建新群组</h4>
                                </div>
                                <div class="modal-body">
                                    <form class="form text-left" role="form" action="#" method="post" accept-charset="utf-8" onsubmit="return false;" ng-submit="group.Create()">
                                        <div class="form-group">
                                            <label for="name">群组名称</label>
                                            <input class="form-control" name="name" type="text" value="" placeholder="群组名称" ng-model="group.newname">
                                        </div>
                                        <div class="form-group">
                                            <label for="description">群组描述</label>
                                            <textarea class="form-control" name="description" rows="3" ng-model="group.newdesc" placeholder="群组描述"></textarea>
                                        </div>
                                        <div ng-if="group.createerror">
                                            <span ng-bind="group.createerror" class="form-control alert alert-danger text-center"></span>
                                        </div>
                                        <div ng-if="group.createmessage">
                                            <span ng-bind="group.createmessage" class="form-control alert alert-success text-center"></span>
                                        </div>
                                        <div class="form-group btn-group btn-group-justified" role="group">
                                            <div class="btn-group" role="group">
                                                <button type="button" class="from-control btn btn-default" data-dismiss="modal">取消</button>
                                            </div>
                                            <div class="btn-group" role="group">
                                                <button type="submit" class="from-control btn btn-primary">确认</button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="modal fade" id="join_group_modal" tabindex="-1" role="dialog" aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times</button>
                                    <h4 class="modal-title">查找群组结果</h4>
                                </div>
                                <div class="modal-body">
                                    <div class="row">
                                        <div class="col-sm-2 col-md-2 col-xs-4 col-lg-2 text-center" ng-repeat="x in group.found" data-toggle="tooltip" tooltip-placement="bottom" tooltip="ID: {{ x.groupid }}" data-id="{{ x.groupid }}" ng-click="group.SetTarget($event)">
                                            <span><span class="glyphicon glyphicon-user"></span><br /> {{ x.groupname }}</span>
                                            <br />
                                        </div>
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <!-- space -->
                                </div>
                                <div class="modal-header">
                                    <h4 class="modal-title">加入群组</h4>
                                </div>
                                <div class="modal-body">
                                    <form class="form text-left" role="form" action="#" method="post" accept-charset="utf-8" onsubmit="return false;" ng-submit="group.Join()">
                                        <div class="form-group">
                                            <input class="form-control" name="name" type="text" value="" placeholder="群组 ID" ng-model="group.findid">
                                        </div>
                                        <div ng-if="group.joinerror">
                                            <span ng-bind="group.joinerror" class="form-control alert alert-danger text-center"></span>
                                        </div>
                                        <div ng-if="group.joinmessage">
                                            <span ng-bind="group.joinmessage" class="form-control alert alert-success text-center"></span>
                                        </div>
                                        <div class="form-group btn-group btn-group-justified" role="group">
                                            <div class="btn-group" role="group">
                                                <button type="button" class="from-control btn btn-default" data-dismiss="modal">取消</button>
                                            </div>
                                            <div class="btn-group" role="group">
                                                <button type="submit" class="from-control btn btn-primary">发送请求</button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="modal fade" id="view_group_record" tabindex="-1", role="dialog" aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times</button>
                                    <h4 class="modal-title">群组聊天记录</b></h4>
                                </div>
                                <div class="modal-body">
                                    <form role="form">
                                        <div ng-repeat="x in group.record">
                                            <div class="row input-group text-left" ng-if="x.userid != userid">
                                                <span class="input-group-addon" data-toggle="tooltip" tooltip-placement="bottom" tooltip="{{ x.ctime }}">
                                                    <button class="form-control btn btn-default btn-sm"><span class="glyphicon glyphicon-user"></span>&nbsp;&nbsp;{{ x.nickname }}</button>
                                                </span>
                                                <div class="messagebox message-left pull-left">
                                                    <div class="arrow">
                                                        <div class="outer"></div>
                                                        <div class="inner"></div>
                                                    </div>
                                                    <div class="message-body">
                                                        <p>{{ x.content }}</p>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row input-group text-right" ng-if="x.userid == userid">
                                                <div class="messagebox message-right pull-right">
                                                    <div class="message-body">
                                                        <p>{{ x.content }}</p>
                                                    </div>
                                                    <div class="arrow">
                                                        <div class="outer"></div>
                                                        <div class="inner"></div>
                                                    </div>
                                                </div>
                                                <span class="input-group-addon" data-toggle="tooltip" tooltip-placement="bottom" tooltip="{{ x.ctime }}">
                                                    <button class="form-control btn btn-default btn-sm">{{ x.nickname }}&nbsp;&nbsp;<span class="glyphicon glyphicon-user"></span></button>
                                                </span>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="modal fade" id="view_group_info_modal" tabindex"-1" role="dialog" aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times</button>
                                    <h4 class="modal-title">群组信息</h4>
                                </div>
                                <div class="modal-body">
                                    <form class="form text-left" role="form" action="#" method="post" accept-charset="utf-8" onsubmit="return false;">
                                        <div class="form-group">
                                            <label for="n_userid" class="control-label">群组 ID</label>
                                            <input class="form-control" ng-disabled="true" type="text" ng-model="group.info.groupid" placeholder="ID" required>
                                        </div>
                                        <div class="form-group">
                                            <label for="n_userid" class="control-label">群组管理员 ID</label>
                                            <input class="form-control" ng-disabled="true" type="text" ng-model="group.info.admin" placeholder="管理员 ID" required>
                                        </div>
                                        <div class="form-group">
                                            <label for="n_nickname" class="control-label">群组名称</label>
                                            <input class="form-control" ng-disabled="true" type="text" ng-model="group.info.groupname" placeholder="名称" required>
                                        </div>
                                        <div class="form-group">
                                            <label for="n_email" class="control-label">群组描述</label>
                                            <input class="form-control" ng-disabled="true" type="email" ng-model="group.info.description" placeholder="描述" required>
                                        </div>
                                        <div class="form-group btn-group btn-group-justified" role="group">
                                            <div class="btn-group" role="group">
                                                <button type="button" class="from-control btn btn-default" data-dismiss="modal">关闭窗口</button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                                <div class="modal-footer">
                                    <!-- space -->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div id="rooms" style="display: none;">
                    <ul class="list-group text-center all-item-group">
                        <li class="list-group-item text-center">
                            <input type="text" ng-model="room.find" placeholder="查找聊天室" class="form-control" ng-change="room.Search()">
                        </li>
                        <li class="list-group-item search-result" ng-repeat="x in room.search" data-toggle="tooltip" tooltip-placement="bottom" tooltip="ID: {{ x.roomid }}" data-id="{{ x.roomid }}" ng-click="room.SearchClick($event)">
                            <span>{{ x.roomname }}</span>
                        </li>
                        <li class="list-group-item select context-room" data-toggle="context" data-target="#context-room-menu" ng-repeat="x in room.all" data-toggle="tooltip" tooltip-placement="bottom" tooltip="ID: {{ x.roomid }}" data-id="{{ x.roomid }}" data-kind="room" data-name="{{ x.roomname }}" ng-click="chat.SetContext($event)">
                            <strong class="text-center">{{ x.roomname }}</strong>
                        </li>
                    </ul>
                    
                    <div id="context-room-menu" style="position: absolute; z-index: 9999; top: 389px; left: 558px;" class="">
                        <ul class="dropdown-menu" role="menu">
                            <li data-action="enter"><a tabindex="-1">进入聊天室</a></li>
                            <li data-action="view_info"><a tabindex="-1">聊天室信息</a></li>
                            <li class="divider"></li>
                            <li data-action="viewnotes"><a tabindex="-1">查看留言板</a></li>
                        </ul>
                    </div>
                    
                    <div class="modal fade" id="view_notes_modal" tabindex="-1", role="dialog" aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times</button>
                                    <h4 class="modal-title">留言板&nbsp;<b>#{{ room.boardid }}</b></h4>
                                </div>
                                <div class="modal-body">
                                    <form role="form">
                                        <label>所有留言</label>
                                        <div ng-repeat="x in room.note">
                                            <div class="row input-group text-left">
                                                <span class="input-group-addon" data-toggle="tooltip" tooltip-placement="bottom" tooltip="{{ x.ctime }}">
                                                    <button class="form-control btn btn-default btn-sm"><span class="glyphicon glyphicon-user"></span>&nbsp;&nbsp;{{ x.nickname }}</button>
                                                </span>
                                                <div class="messagebox message-left pull-left">
                                                    <div class="arrow">
                                                        <div class="outer"></div>
                                                        <div class="inner"></div>
                                                    </div>
                                                    <div class="message-body">
                                                        <p>{{ x.content }}</p>
                                                    </div>
                                                </div>
                                                <br />
                                            </div>
                                        </div>
                                    </form>
                                    <hr>
                                    <form action="#" method="post" onsubmit="return false;" ng-submit="room.MakeNote()" style="padding-bottom: 0px;">
                                        <label>创建新留言</label>
                                        <div class="input-group">
                                            <!-- <textarea class="form-control" name="description" rows="3" max-length="512" ng-model="room.newnote" placeholder="新留言" autocomplete="off"></textarea> -->
                                            <input type="text" ng-maxlength="512" autocomplete="off" class="form-control" name="nextmsg" ng-model="room.newnote" value="" placeholder="新留言">
                                            <span class="input-group-btn">
                                                <button class="btn btn-default form-control" type="submit">发布</button>
                                            </span>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="modal fade" id="view_room_info_modal" tabindex"-1" role="dialog" aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times</button>
                                    <h4 class="modal-title">聊天室信息</h4>
                                </div>
                                <div class="modal-body">
                                    <form class="form text-left" role="form" action="#" method="post" accept-charset="utf-8" onsubmit="return false;">
                                        <div class="form-group">
                                            <label for="n_userid" class="control-label">聊天室 ID</label>
                                            <input class="form-control" ng-disabled="true" type="text" ng-model="room.info.roomid" placeholder="ID">
                                        </div>
                                        <div class="form-group">
                                            <label for="n_nickname" class="control-label">聊天室名称</label>
                                            <input class="form-control" ng-disabled="true" type="text" ng-model="room.info.roomname" placeholder="名称" required>
                                        </div>
                                        <div class="form-group">
                                            <label for="n_email" class="control-label">聊天室描述</label>
                                            <input class="form-control" ng-disabled="true" type="email" ng-model="room.info.description" placeholder="描述" required>
                                        </div>
                                        <div class="form-group btn-group btn-group-justified" role="group">
                                            <div class="btn-group" role="group">
                                                <button type="button" class="from-control btn btn-default" data-dismiss="modal">关闭窗口</button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                                <div class="modal-footer">
                                    <!-- space -->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-md-9 col-sm-9 col-xs-12 col-lg-9 text-center" style="padding-left: 0px !important; padding-right: 0px !important; ">
            <span id="popover-header" class="form-control btn btn-primary" data-kind="{{ title.kind }}" data-id="{{ title.id }}" ng-bind="title.text" ng-click="title.Query($event)" data-container="#member-containter" data-toggle="popover" tabindex="0" role="button" data-placement="bottom" data-trigger="manual" popover-html-unsafe><!-- data-trigger="focus" -->
            </span>
        </div>

        <div class="col-md-9 col-sm-9 col-xs-12 col-lg-9 text-center panel panel-home">
            <div style="height: 610px;">
                <div id="member" style="display: none;">
                    <div class="row">
                        <div class="col-sm-2 col-md-2 col-xs-4 col-lg-2 text-center" ng-repeat="x in title.member" data-toggle="tooltip" tooltip-placement="left" tooltip="ID: {{ x.userid }}">
                            <span><span class="glyphicon glyphicon-user"></span><br /> {{ x.nickname }}</span>
                            <br />
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div id="member-containter" class="col-md-10 col-sm-10 col-xs-12 col-lg-10"></div>
                </div>
                <div class="chatting">
                    <form role="form">
                        <div ng-repeat="x in chat.unreads">
                            <br />
                            <div class="row input-group text-left" ng-if="!x.self">
                                <span class="input-group-addon" data-toggle="tooltip" tooltip-placement="bottom" tooltip="{{ x.ctime }}">
                                    <button class="form-control btn btn-default btn-sm"><span class="glyphicon glyphicon-user"></span>&nbsp;&nbsp;{{ x.nickname }}</button>
                                </span>
                                <div class="messagebox message-left pull-left">
                                    <div class="arrow">
                                        <div class="outer"></div>
                                        <div class="inner"></div>
                                    </div>
                                    <div class="message-body">
                                        <p>{{ x.content }}</p>
                                    </div>
                                </div>
                            </div>
                            <br />
                            <div class="row input-group text-right" ng-if="x.self">
                                <div class="messagebox message-right pull-right">
                                    <div class="message-body">
                                        <p>{{ x.content }}</p>
                                    </div>
                                    <div class="arrow">
                                        <div class="outer"></div>
                                        <div class="inner"></div>
                                    </div>
                                </div>
                                <span class="input-group-addon" data-toggle="tooltip" tooltip-placement="bottom" tooltip="{{ x.ctime }}">
                                    <button class="form-control btn btn-default btn-sm">{{ nickname }}&nbsp;&nbsp;<span class="glyphicon glyphicon-user"></span></button>
                                </span>
                            </div>
                        </div>
                    </form>
                </div>
                <div>
                    <form action="#" method="post" onsubmit="return false;" ng-submit="chat.Send()" style="padding-bottom: 0px;">
                        <div class="input-group">
                            <input type="text" maxlength="512" autocomplete="off" class="form-control" name="nextmsg" ng-model="chat.message" value="" placeholder="新消息" ng-disabled="!(chat.target.kind && chat.target.id)">
                            <span class="input-group-btn">
                                <button class="btn btn-default" type="submit">发送</button>
                            </span>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>


